/* eslint-disable react-hooks/rules-of-hooks */
import React, { useEffect, useState } from "react";
import { Table, Modal } from "antd";
import type { ColumnsType } from "antd/es/table";
import { DeleteOutlined, EditOutlined } from "@ant-design/icons";
import { jixiao_dangan } from "../../../api/HuYueYue/jixiao";

import "../../../styles/HuYueYue/dangan.scss";

import { useNavigate } from "react-router-dom";
function dangan(props: any) {
  interface DataType {
    key: string;
    name: string;
    number: string;
    type: string;
    staff: string;
    count: string;
    average: string;
    score:string;
    grade:string;
    caozuo: string[];
  }

  const columns: ColumnsType<DataType> = [
    {
      title: "被考核员工",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "工号",
      dataIndex: "number",
      key: "number",
    },
    {
      title: "员工部门",
      dataIndex: "type",
      key: "type",
    },
    {
      title: "员工职位",
      key: "staff",
      dataIndex: "staff",
    },
    {
      title: "考核次数",
      key: "count",
      dataIndex: "count",
    },
    {
      title: "考核平均分",
      key: "average",
      dataIndex: "average",
    },
    {
      title: "最近一次考核分数",
      key: "score",
      dataIndex: "score",
    },
    {
      title: "最近一次考核等级",
      key: "grade",
      dataIndex: "grade",
    },
    {
      title: "操作",
      key: "caozuo",
      dataIndex: "caozuo",
      render: (_, record: { key: React.Key }) =>
        list.length >= 1 ? (
          <div className="operation">
            <span
              onClick={() => {
                detail(record);
              }}
            >
              查看详情
            </span>
          </div>
        ) : null,
    },
  ];

  //   跳转
  let navigate = useNavigate();
  //  查看详情
  let detail = (record: any) => {
    console.log("查看详情");
    navigate("/index/jixiao/detail", { replace: false, state: record });
  };

  // 档案
  let danglist = () => {
    jixiao_dangan().then((res) => {
      console.log(res);
      let arr = res.data.map((v: any, i: any) => {
        return {
          key: i,
          id: v.id,
          name:v.name,
          number:v.number,
          type:v.type,
          staff:v.staff,
          count:v.count,
          average:v.average,
          score:v.score,
          grade:v.grade,
        };
      });
      useList(arr);
    });
  };

  // 列表数据
  let [list, useList] = useState([]);
  useEffect(() => {
    danglist();
  }, []);

  return (
    <div className="dangan">
      <div className="center">
        <h2>
          员工绩效档案{" "}
          <button
            className="add"
          >
            导出
          </button>
        </h2>

        <Table
          columns={columns}
          dataSource={list}
          pagination={{ pageSize: 9 }}
        />
      </div>
    </div>
  );
}

export default dangan;
